<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue学习</title>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>
  </head>
  <body>
    <div id="app">
      <div>
        <div>
          账号：
          <input type="text" v-model="loginForm.username" />
        </div>
        <div>
          密码：
          <input type="text" v-model="loginForm.password" />
        </div>
        <div>
          <button @click="doLogin">进入系统</button>
        </div>
      </div>
      <hr />
      <ul>
        <li v-for="item in users" :key="item.id">{{item.name}}</li>
      </ul>
    </div>
    <script>
      // 全局配置axios请求是基础地址 baseUrl
      axios.defaults.baseURL = 'http://localhost:9000'
      // 全局配置请求的超时时长 ms  全局请求的超时时长为10秒
      axios.defaults.timeout = 10000
      // 全局给请求添加额外的头信息
      axios.defaults.headers['token'] = 'afkewfjkewfjlewfjelwfjwlfjewlfejlfewjl'

      const app = Vue.createApp({
        data() {
          return {
            loginForm: {
              username: '',
              password: ''
            },
            users: []
          }
        },
        async created() {
          let ret = await axios.get('/api/users')
          // 请求成功，进行赋值
          if (ret.status == 200) {
            this.users = ret.data.data
          }
        },
        methods: {
          async doLogin() {
            // axios.put/delete/get/post
            let ret = await axios.post('/api/login', this.loginForm)
            console.log(ret.data)
          }
        }
      })
      app.mount('#app')
    </script>
  </body>
</html>
